<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>美丽说</title>
		


<link rel="stylesheet" href="lunbo/css/layout_1.css">

		 <style type="text/css">
		 	
		 </style>
		 <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		 <script type="text/javascript">
		 	$(function(){
				 		
				$('.top ul li ').eq(4).mouseover(function(){
				
					$('.top ul li .shoucang2').css("display","block");
				});
				$('.top ul li').eq(4).mouseout(function(){
					$('.top ul li .shoucang2').css("display","none");
				});
					 		
				$('.top ul li ').eq(7).mouseover(function(){
				
					$('.top ul li .fuwu3').css("display","block");
				});
				$('.top ul li').eq(7).mouseout(function(){
					$('.top ul li .fuwu3').css("display","none");
				});
				$('.flag ul li').mouseover(function(){
					$('.flag ul li').css("background","#f8f8f8");
					$(this).css({"background":"blueviolet","opacity":"1"});
								
				});
				$('.flag ul li').mouseout(function(){
					$('.flag ul li').css("background","#f8f8f8");
				});
				$('.flag ul li ').eq(0).mouseover(function(){
				
					$('.flag ul li .ma').css("display","block");
				});
				$('.flag ul li').eq(0).mouseout(function(){
					$('.flag ul li .ma').css("display","none");
				});
				 
   	$(window).scroll(function(){
// 		var scrollTop = $('body,html').scrollTop();
			
   		var mleft = $('.main-left-top h4');
   	
   		var mmin = $('.main-min-top ul');
   		var mright =$('.main-right');
   		//console.log($(this).scrollTop)
   		if($(this).scrollTop() >1182){
   			mleft.css({"position":"fixed","top":"0px","width":"219px"});
   			mmin.css({"position":"fixed","top":"0px"});
   			mright.css({"position":"fixed","top":"0px","left": "1068px"});
   		}else{
   			mleft.css({"position":"absolute","top":"1182px","width":"200px"});
   			mmin.css({"position":"absolute","top":"1182px"});
   			mright.css({"position":"absolute","top":"1182px","left": "1068px"});
   		}
   	}) 
					 })
		 </script>
		 <link rel="stylesheet" type="text/css" href="css/indexson.css"/>
	</head>
	<body>
		<!-----------top----------------------->
		<div class ="top">
			<div class = "wrap">
				<ul>
					<li><span class = "span0"></span><a href="weixindenglu.html">微信登录</a></li>
					<li><span class = "span1"></span><a href="qqdenglu.html">qq登录</a> </li>
					<li><a href="denglu.html">登录</a> </li>
					<li><a href="zhuce.html">注册</a> </li>
					<li><span class = "span2"></span ><a href="">我的收藏</a>	<div class = "shoucang2"><a>收藏宝贝</a><br/><a>收藏店铺</a></div</li>
					
					<li class = "shouchang"><span class = "span3"></span><a class = "buy" href="car.html">我的购物车</a></li>
				<!--
                	<div class = "sz"><a>收藏宝贝</a><br/><a>收藏店铺</a></div>
                -->	
					<li><span class = "span4"></span><a href="">我的订单</a></li>
					<li><a href="##">帮助中心</a><span class = "span5 "></span><div class = "fuwu3"><a>买家服务</a><br/><a>卖家服务</a><br/><a>服务中心</a></li>					
					<li class = "last"><a href="">商家后台</a></li>
				</ul>
			</div>
		</div>
		<!-----------top1----------------------->
		<div class ="top1">
			<div class = "wrap">
				<a href = "index.html" class= "logo"><img src="img/182326981374.png" ></a>
				<div class= "search">
					<button class="bck-pink">宝贝</button> 
					<button>店铺</button>
					<input type="text" class="txt" placeholder="既能内搭又能外穿，选针织衫就对了" />
					<input type= "button" class="btn"  />
				   <ul>
				   	    <li><a href="index.html">首页</a></li>
				   	    <li><a href="" class="fontColor">打底衬衫</a></li>
				   		<li><a href="">毛衣</a></li>
				   		<li><a href="">打底衬衫</a></li>
				   		<li><a href="">毛衣</a></li>
				   		<li><a href="" class="fontColor">打底衬衫</a></li>
				   		<li><a href="">毛衣</a></li>
				   		<li><a href="">打底衬衫</a></li>
				   		<li><a href="">毛衣</a></li>
				   		<li><a href="" class="fontColor">打底衬衫</a></li>
				   		<li><a href="">毛衣</a></li>
				   		<li><a href="">打底衬衫</a></li>
				   </ul>
				</div>		
			   
			   
			    <img class="tr" src="img/1rp_49cgihk50031c69jjk51ilkjk4950_210x157.gif">
			</div>
		</div>
		<!-----------banner----------------------->
		<div class ="banner">
			<div class = "meiliyouxuan">
				<img src = 'imgson/meiliyouxuan.png'/>
			</div>
			<div class="banner-ul">
				<div class = "wrap">
					<ul>
						<li><a href="index.html">首页</a></li>
						<li><a href="#">全部商品</a></li>
						<li><a href="#">外套</a></li>
						<li><a href="#">上衣</a></li>
						<li><a href="#">裤子</a></li>
						<li><a href="#">鞋子</a></li>
						<li><a href="#">套装</a></li>
						<li><a href="#">包包</a></li>
					</ul>
			    </div>
			</div>
		</div>
		<!-----------------nav--------------------->
	<div class = "nav">
		<div class = "wrap">
			<div class = "nav-left">
			
					
						<ol>
							<!--<li><img src="imgson/big01.jpg" /></li>
							<li><img src="imgson/big02.jpg" /></li>
							<li><img src="imgson/big03.jpg" /></li>
							<li><img src="imgson/big04.jpg" /></li>-->
							
						</ol>
										
						<ul>
							<!--<li><img src ="imgson/small01.jpg"/></li>
							<li><img src ="imgson/small02.jpg"/></li>
							<li><img src ="imgson/small03.jpg"/></li>
							<li><img src ="imgson/small04.jpg"/></li>-->
						</ul>
					
					<script type="text/javascript">
					$(function(){
//						 var $href = window.location
//                       var $str = decodeURIComponent($href);
//                       var $dd=$str.split("?");
//                       var $main = $dd[1]
//                       var $img = $('.nav-left ul li img')
//						$.getJSON("jsons/indexson1.json",function(json){
//							$.each($img,function(i){
//       	                    $img.attr("data-id",$main)
//                          })
//							var $olli = json[$main].bigimg;
//							var $ulli = json[$main].smallimg;
//								console.log($olli[$main]);
//							$.each($olli,function(i){
//		$('<li><img src="imgson/'+ $olli[i]+'" /></li>').appendTo($('.nav-left ol'))
//		$('<li><img src="imgson/'+ $ulli[i]+'" /></li>').appendTo($('.nav-left ul'))
//													
//							})
//							console.log(json[1].name);
//		$('<h3 class = "goodname">'+json[$main].name+'</h3>').appendTo($('.nav-min-top'))
//		$('<b class= "cuxiaojia">'+json[$main].price+'</b>').appendTo($(" .nav-min-second .cxj"))
//		$('<img src ="imgson/'+$ulli[0]+'"/>').appendTo($('.kuanshi'))
//						})
					})
						
					</script>	
					
					
					
				
			</div>
			<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				$('ul').on("mouseover","li",(function(){
					var i = $(this).index();
					
					$('.nav-left ol li').eq(i).show().siblings().hide();
				}))
			</script>
			
			
			<div class = "nav-min">
				<div class = "nav-min-top">
					<div class="goodInfo" data-good-id="sp1">
					<!--<h3 class = "goodname">minus冬季新款小香风黑色半裙套装</h3>-->
					</div>
				</div>
				<div class = "nav-min-second">
					<div>价格： <del>¥331.25</del></div>
					<div class = "cxj">
						促销价：<!--<b class= "cuxiaojia"></b> -->
						
					</div>
					<div><img src = "imgson/nav-min1.png"/></div>
					<div>店铺优惠：<b>购物满98元立减5元</b></div>
				</div>
				<div class = "k1">
					客服：<img src = "imgson/kefu.gif" /> <b>联系客服</b>
				</div>
				<div class= "k1 kuanshi">款式：<!--<img src ="imgson/kuanshi.png"/>--></div>
				<div class= "chima">
					尺码:
					<button>S</button><button>M</button><button>L</button>
					
				</div>
				<div class= "k1">数量：</div>
				<div class = "lijigoumai">
					<button class = "button1"><a href = "car.html">立即购买</a></button>
					<button class = "button2"><a href = "car.html">加入购物车</a></button>
				</div>
				<div><img src = "imgson/nav-min2.png"/></div>
			</div>
			
			
		<script type="text/javascript" src="jss/jquery.cookie.js" ></script>
		<script type="text/javascript" src="jss/jquery.fly.js" ></script>
		<script type="text/javascript" src="jss/requestAnimationFrame.js" ></script>
		<script type="text/javascript">
		
			$(function(){
				var $href = window.location
                var $str = decodeURIComponent($href);
                var $dd=$str.split("?");
                var $main = $dd[1]
                var $img = $('.nav-left ul li img:first')
						$.getJSON("jsons/indexson1.json",function(json){
							$.each($img,function(i){
         	                    $img.attr("data-id",$main)
                            })
							var $olli = json[$main].bigimg;
							var $ulli = json[$main].smallimg;
								console.log($olli[$main]);
							$.each($olli,function(i){
		$('<li><img src="imgson/'+ $olli[i]+'" /></li>').appendTo($('.nav-left ol'))
		$('<li><img src="imgson/'+ $ulli[i]+'" /></li>').appendTo($('.nav-left ul'))
													
							})
							console.log(json[1].name);
		$('<h3 class = "goodname" data-good-id="'+$main+'">'+json[$main].name+'</h3>').appendTo($('.nav-min-top'))
		$('<b class= "cuxiaojia">'+json[$main].price+'</b>').appendTo($(" .nav-min-second .cxj"))
		$('<img src ="imgson/'+$ulli[0]+'"/>').appendTo($('.kuanshi'))
						})
				
				
				
				
				//加载已有的购物车信息
				loadCart();
//			 var $data-good-id = $('.nav-min-top h3')	
//				//给购物车按钮加一个点击事件
//				$(".buy").click(function(){
//					location.href = "car.html";
//				});
				//给加入购物车按钮添加点击事件
				$(".lijigoumai button").click(function(e){
				 var $href = window.location
                         var $str = decodeURIComponent($href);
                         var $dd=$str.split("?");
                         var $main = $dd[1]
                     //    var $data-good-id = $('.nav-min-top h3')	
                         console.log($img);
					//获取商品的id（用来区分不同的商品）
					var goodId =  $('.nav-min-top h3').attr("data-good-id");
						//alert(goodId);
					//获取商品的名称
					console.log(goodId)
					var goodName = $('.goodname').html();
					console.log(goodName)
					//获取商品的价格
					var goodPrice = parseFloat($('.cuxiaojia').html());
					console.log(goodPrice)
					//获取商品的图片src
					var goodSrc = $('.nav-left ul li:first img').attr("src");
					console.log(goodSrc);
					
					var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
					//将字符串转成对象
					var cartObj = convertCartStrToObj(cartStr);
					//判断该商品是否已经在购物车中存在
					if(goodId in cartObj){
						//如果已存在，那么该商品的数量加1
						cartObj[goodId].num += 1;
					}else{
						//如果不存在，那么将新商品的信息存入
						cartObj[goodId] = {
							name : goodName,
							price : goodPrice,
							num : 1,
							src : goodSrc
						};
					}
					
					cartStr = convertObjToCartStr(cartObj);
					//存入cookie
					$.cookie("cart",cartStr,{expires : 7,path:"/"});
				})
			});
			
			
			function convertCartStrToObj(cartStr){
				if(!cartStr){
					return {};
				}
				var goods = cartStr.split(":");
				var obj = {};
				for(var i = 0; i < goods.length; i ++){
					var data = goods[i].split(",");
					obj[data[0]] = {
						name : data[1],
						price : parseFloat(data[2]),
						num : parseInt(data[3]),
						src : data[4]
					}
				}
				return obj;
			}
			function convertObjToCartStr(obj){
					
					var cartStr = "";
					//遍历对象
					for(var id in obj){
						if(cartStr){
							cartStr += ":";
						}
						cartStr += id + "," + obj[id].name + "," + obj[id].price + "," + obj[id].num + "," + obj[id].src;
					}
					return cartStr;
			}
			
			//加载购物车中的信息（使商品页与购物车页中的购物车数量同步）
			function loadCart(){
				var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
					var cartObj = convertCartStrToObj(cartStr);
					//获取到购物车中所有商品的数量
					var total = 0;
					for(var id in cartObj){
						total += cartObj[id].num;
					}
					$("#buy").val("购物车(" + total + ")");
			}
		</script>
			
			
			
			<div class = "nav-right">
				<ul>
					<h4>— 热卖推荐 —</h4>
					<li>
						<a href="#">
							<img src = "imgson/nav-right1.png" />
							<span>¥98.40</span>
						</a>
					</li>
					<li>
						<a href="#">
							<img src = "imgson/nav-right1.png" />
							<span>¥98.40</span>
						</a>
					</li>
					<li>
						<a href="#">
							<img src = "imgson/nav-right1.png" />
							<span>¥98.40</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!-----------main----------------------->
	<div class= "main">
		<div class="wrap">
			<div class = "main-left">
				<div class="main-left-top">
					<h4>美利优选<img src = "imgson/kefu.gif" /></h4>
					<ul>
						<li><p>描述</p><p class = "color-red">4.71</p></li>
						<li><p>描述</p><p class = "color-red">4.71</p></li>
						<li><p>描述</p><p class = "color-red">4.71</p></li>
						<li class = "last">
							<p>描述</p><p class = "color-red">4.71</p>
						</li>
					</ul>
					<div class = "btn">
						<a href ="#">收藏店铺</a>
						<a href ="#">进入店铺</a>
					</div>
					<div class= "search">
						<input type = "text" />
						<input type = "button" />
					</div>
					<div class = "xiaodian">
						<a href = "#">
							<img src = "imgson/left-top1.png" />
						</a>
					</div>
				</div>
				
				<div class ="main-left-center">
					<h4>本店分类</h4>
					<ul class ="fenlie"></ul>
				</div>
				<script type="text/javascript">
					$.getJSON("jsons/indexson.json",function(json){
						var $list = json.list;
						$.each($list,function(i){
							$('<li><a href ="##">>'+ $list[i]+'</a></li>').appendTo(".main-left-center ul")
						})
					})
				</script>
				<div class = "main-left-bottom">
					<h4>看了又看</h4>
					<img src = "imgson/kanleyoukan.png"/>
				</div>
			</div>

		<div class = "main-min">
				<div class= "main-min-top">
					<ul>
						<li><a href = "#">商品详情</a></li>
						<li><a href = "#">累计评价</a></li>
						<li><a href = "#">本店同类商品</a></li>
						<li class = "last"><a href = "#">手机扫码下单</a></li>
					</ul>
				</div>
				<div class = "main-min-wrap">
					
					<div class = "spms louti">
						<h1>商品描述</h1>
						<div class = "spms-del">
小香风编织边开衫短裙套装！这个开衫和短裙最难的地方就是这个编织边了，也是他特别的所在。小香风名媛风，高贵 奢华大牌的感觉！披着更加有范有木有！领边和裙摆的撞色拼接，让人无法忽视的存在感，吸睛度大爆表！代表着气场自信女人。大圆领露锁骨，不仅显瘦，更添加了休闲的味道。细节处是一边有两个小口袋，让整体感觉不会太过于正式场合；而纽扣采用了针织扣，提升衣服档次，在一般日常搭配也能很好运用，不仅具有实用性，更加强调它的独特性。黑白撞色设计，更加突出领边的编织复古感。
						</div>
					</div>
					<div class = "czxg louti">
						<h1>穿着效果</h1>
						<img src = "imgson/czxg.png" />
					</div>
					<div class = "xjzs louti">
						<h1>细节展示</h1>
						<img src="imgson/xjzg.png" />
					</div>
				</div>
			</div>
			<div class = "main-right">
				<div class = "main-right-top">
					<h3>加入购物车</h3>
				</div>
				<div class = "main-right-detail">
					<ul>
						<li>商品描述</li>
						<li>穿着效果</li>
						<li>细节做工</li>
						<li>尺码说明</li>
						<li>商品推荐</li>
						
					</ul>
				</div>
			</div>
		</div>
	</div>
		<!-----------footer----------------------->
		<div class ="footer">
			<div class = "wrap">
				<div class="ftop">
					
				
				<ul>
					<h3>买家帮助</h3>
					<li><a href="">新手指南</a></li>
					<li><a href="">服务保障</a></li>
					<li><a href="">常见问题</a></li>
					<li><a href="">风险监测</a></li>
				</ul>
				<ul>
					<h3>商家帮助</h3>
					<li><a href="">商家入驻</a></li>
					<li><a href="">商家后台</a></li>
					
				</ul>
				<ul>
					<h3>关于我们</h3>
					<li><a href="">关于美丽说</a></li>
					<li><a href="">联系我们</a></li>
					
				</ul>
				<ul>
					<h3>关注我们</h3>
					<li><span></span><a href="">新浪微博</a></li>
					<li><span></span><a href="">qq空间</a></li>
					<li><span></span><a href="">腾讯微博</a></li>
					
				</ul>
				<dl>
					<dt><h3>美丽说微信服务号</h3></dt>
					<dd><img src="img/7e_61hjl8kjfjfagkg3cdaj05fghck9c_100x100.png"</dd>
				</dl>
				<dl>
					<dt><h3>美丽说客户端下载</h3></dt>
					<dd><img src="img/7e_74j23d2a5f5j3bj31h70375gbeec1_100x100.png"</dd>
				</dl>
				</div>
				<div class="foo">
		Copyright ©2017 Meilishuo.com &nbsp;<a href="http://s16.mogucdn.com/new1/v1/bmisc/518ea1bbd36948b90e658485d2700e62/181714310539.pdf" target="_blank">电信与信息服务业务经营许可证100798号</a>&nbsp;<a href="http://s16.mogucdn.com/p1/160811/idid_ifrtszjqmmzdazrumezdambqhayde_2436x3500.jpg" target="_blank">经营性网站备案信息</a>&nbsp; <br> 京ICP备11031139号&nbsp; 京公网安备110108006045&nbsp;&nbsp; 客服电话：4000-800-577&nbsp; 文明办网文明上网举报电话：010-82615762 &nbsp;<a href="http://net.china.com.cn/index.htm" target="_blank">违法不良信息举报中心</a>		
				</div>
			</div>
		</div>
<script type="text/javascript">
var $detailli =  $('.main-right-detail ul li')
for(var i = 0; i < $detailli.length; i++){
	 $detailli.click(function(){
   	var $index = $(this).index();
   	console.log($index)
   	console.log($('.louti'))
   	var $top = $('.louti').eq($index).offset().top;
   	console.log($top);
 	$('body,html').animate({
   		scrollTop: $top -60
   	},500)
   })
}

   </script>
	</body>
   
	
</html>
